<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import slider2 from '@/components/slider2.vue';

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const num = ref('1')

const back = () => {
  console.log('1234')
  router.go(-1);
}
</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>订单详情</div>
      </div>
      <div class="navBox_title_but">
        <div :class="num == 1 ? 'active' : 'but'" @click="num = 1">自选单</div>
        <div :class="num == 2 ? 'active' : 'but'" @click="num = 2">经典单</div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="pv_Box">
      <div v-show="num == 1">
        <div class="pvbox_input">
          <div class="pvbox_input_box">
            <div class="pvbox_input_box1">收货地址</div>
            <div class="pvbox_input_box2" style="width: 70%;">
              <input type="text" placeholder="添加收货地址">
            </div>
            <div class="pvbox_input_box3">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
        <div style="background-color: #fafafa;height: 15px;"> </div>
        <div class="pvbox_list">
          <div class="pvbox_list1">共12件商品</div>
          <div class="pvbox_list2" v-for="item in 3">
            <div class="pvbox_list2_left">
              <div style="display: flex;">
                <div style="height: 40px;margin-right: 10px;">
                  <img src="/public/images/free01.png" alt="">
                </div>
                <div>
                  <div style="font-size: 15px;margin-bottom: 5px;">玫瑰单枝</div>
                  <div style="font-size: 12px;color: #acacac;">零售</div>
                </div>
              </div>
              <div style="font-size: 18px;line-height: 40px;">x4</div>
            </div>
            <div class="pvbox_list2_right">￥18.00</div>
          </div>
          <div class="pvbox_list3">
            基准价 <text style="color: #f84c55;">￥98.80</text>
          </div>
          <div class="pvbox_list3">
            建议价 <text style="color: #f84c55;">￥84.70</text>
          </div>
          <div class="pvbox_list4">
            <div class="pvbox_input_box1">备注</div>
            <div class="pvbox_input_box2" style="width: 70%;">
              <input type="text" placeholder="填写备注">
            </div>
            <div class="pvbox_input_box3">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
      <div v-show="num == 2">枝数2233</div>
    </div>
    <!-- 底部slider -->
    <div class="ov_footer">
      <slider2></slider2>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {

  // 导航
  .navBox {
    height: 100px;
    background-color: #f84c55;

    .navBox_title {
      color: #fff;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }

    .navBox_title_but {
      border: 1px solid #fff;
      width: 55%;
      margin: 10px auto 0;
      border-radius: 50px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;

      .but {
        width: 50%;
        text-align: center;
        color: #fff;
        padding: 5px 10px;
        box-sizing: border-box;
      }

      .active {
        width: 50%;
        text-align: center;
        color: #f96e75;
        line-height: 30px;
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }

  // 分类列表
  .pv_Box {
    .pvbox_input {
      padding: 15px;
      box-sizing: border-box;

      .pvbox_input_box {
        background-color: #f6f6f6;
        padding: 15px 10px;
        box-sizing: border-box;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;

        input {
          width: 100%;
          background-color: #f6f6f6;
          font-size: 14px;
          border: none;
          height: 20px;
        }
      }
    }

    .pvbox_list {
      padding: 10px;
      box-sizing: border-box;

      .pvbox_list1 {
        font-size: 18px;
      }

      .pvbox_list2 {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
        .pvbox_list2_left{
          width: 75%;
          display: flex;
          justify-content: space-between;
          img{
            height: 40px;
          }
        }
        .pvbox_list2_right{
          width: 20%;
          font-size: 18px;
          text-align: right;
          line-height: 40px;
        }
      }

      .pvbox_list3 {
        text-align: right;
        margin: 15px 0;
      }

      .pvbox_list4 {
        background-color: #f6f6f6;
        padding: 15px 10px;
        box-sizing: border-box;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;

        input {
          width: 100%;
          background-color: #f6f6f6;
          font-size: 14px;
          border: none;
          height: 20px;
          text-align: right;
        }
      }
    }
  }

  // 底部slider
  .ov_footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
  }
}
</style>